<template>
  <div class="com_header container">
    <div class="head_list">
      <img v-lazy="userInfo.img" alt="">
      <i>{{userInfo.account}}</i>
      <router-link to="/">首页</router-link>
      <router-link to="/chat">聊天室</router-link>
      <router-link to="/list">动态</router-link>
      <span @click="logout">退出/切换用户</span>
    </div>
    <div class="hold"></div>
  </div>
</template>
<script>
import cookie from 'cookiejs'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted () {
    if (!this.userInfo.account) {
      this.$store.dispatch('getUserInfo', {account: localStorage.getItem('account')})
    }
  },
  methods: {
    logout () {
      cookie.remove('zp_token')
      this.$router.push('login')
    }
  }
}
</script>
<style lang="less" scoped>
.com_header{
  .head_list{
    position: absolute;
    top: 0;
    height: 50px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    img{
      height: 50px;
      width: auto;
    }
    span{
      cursor: pointer;
    }
    i{
      padding: 0 5px;
      color: rgb(255, 208, 0);
    }
    @keyframes trans {
      0%{
        color: rgb(255, 72, 0);
      }
      20%{
        color: rgb(255, 187, 0);
      }
      40%{
        color: rgb(0, 255, 64);
      }
      60%{
        color: rgb(0, 132, 255);
      }
      80%{
        color: rgb(247, 0, 255);
      }
      100%{
        color: rgb(255, 72, 0);
      }
    }
    a,span{
      padding: 0 20px;
      color: rgb(255, 72, 0);
      &:hover{
        animation: trans 2s infinite;
      }
    }
  }
  .hold{
    background: transparent;
    width: 100%;
    height: 50px;
  }
}
</style>
